<template>
	<view id="relocation" class="digital-page">
		<view class="top-banner">
			<image src="../../static/Dp/Logo_487x93.png" mode="widthFix"></image>
		</view>
		<view class="banner">
			<view class="title-area">
				<div class="title-cn">迁台渊源</div>
				<div class="title-en">Relocation to Taiwan</div>
			</view>
		</view>
		<view class="main-content">
			<template v-for="(v, k) in data" :key="k" >
				<view class="block">
					<view class="header">
						{{ v.Topic }}
					</view>
					<rich-text :nodes="v.nodes" class="content"  @click="richTextClick(v.imgs)">
					</rich-text>
				</view>
			</template>
			<view class="block map-container">
				<view class="header">
					展馆位置
				</view>
				<map :longitude="orgLongitude" :latitude="orgLatitude" :markers="markers"/>
				<view class="title">
					开放时间
				</view>
				<view class="content">
					周一 全天闭馆<br>
					周二 周日9:00开馆-16:00停止检票-17:00闭馆<br>
					* 周一逢国家法定节假日全天开放，除夕、大年初一闭馆<br>
				</view>
			</view>
			<view class="block navigate">
				<view class="header">
					展厅导览
				</view>
				<image mode="widthFix" :src="src" @click="switchImg"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	// 黄昕焕 @ 2023年4月19日 页面
	// 黄昕焕 @ 2023年5月5日 绑定(缺少数据)
	// 姚珅 @ 5月21日 返回组件添加，页面修改以及部分绑定 (缺少预约馆的数据)
	// 黄玺 @ 9月9日 重新修改逻辑
	import { onLoad } from '@dcloudio/uni-app'
	import backBtn from './back.vue'
	import { ref } from 'vue'
	import parseHtmlData from './parseHtmlData.js'
	import setShare from '../../share.js'
	setShare({
		title: '迁台渊源 - 云上埔坪',
		path: "/pages/DigitalPlatform/relocation"
	});
	let uniqueCode = "1eqL2S0KLyhuVF0J7fxP86";
	let data = ref([]);
	
	uni.post("/api/categorySource", {
		uniqueCode,
		hasContent: true,
		pageSize: 1
	}).then(msg => {
		for (let d of msg.data) {
			let { nodes, imgs } = parseHtmlData(d.Content);
			d.nodes = nodes;
			d.imgs = imgs;
			data.value.push(d);
		}
	});
	
	function richTextClick (imgs) {
		if (imgs.length) {
			wx.previewImage({
				current: imgs[0], // 当前显示图片的http链接
				urls: imgs
			})
		}
	}
	
	let orgLongitude = 117.391737, orgLatitude = 24.158925;
	let markers = [
		{
			id: 0,
			longitude: orgLongitude,
			latitude: orgLatitude,
			callout: {
				content: '迁台记忆馆（思永楼）',
				display: 'ALWAYS',
				fontSize: 15,
				padding: 10,
				borderRadius: 5
			}
		},
	];
	
	let i = 1;
	let src = ref("");
	function switchImg () {
		i = ++i % 2;
		src.value = `https://www.lin-home.com/static/DigitalPlatform/迁台渊源/主展厅导览${i + 1}.png`
	}
	switchImg();
</script>

<style lang="less">
	@import url(shared.less);
	@title-size: 32rpx;
	@mini-size: 22rpx;
	@content-size: 25rpx;
	@floor-size: 19rpx;
	@font-color: #A1A6AE;

	#relocation {
		.title-area {
			width: calc(32rpx * 22);
		}

		.main-content {
			padding-bottom: 30rpx;
			color: @text-color;
			font-size: 12px;
			.map-container {
				map {
					height: 565rpx;
					width: 100%;
					margin-bottom: 16rpx;
				}
				.title {
					font-weight: bold;
				}
			}
			.navigate {
				image {
					width: 100%;
					transition: .5s all;
				}
			}
		} // main-content
	}
</style>